<template>
  <div class="orders-container">
    <el-card class="orders-card">
      <template #header>
        <div class="card-header">
          <h2>门诊医嘱</h2>
          <div class="header-actions">
            <el-button type="primary" @click="handleSave">保存医嘱</el-button>
            <el-button type="success" @click="handlePrint">打印医嘱</el-button>
          </div>
        </div>
      </template>
      
      <el-form :model="orderForm" label-width="100px">
        <el-form-item label="患者信息">
          <el-descriptions :column="3" border>
            <el-descriptions-item label="就诊卡号">{{ patientInfo.cardNo || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{ patientInfo.name || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ patientInfo.gender || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ patientInfo.age || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="医保类别">{{ patientInfo.insuranceType || '暂无' }}</el-descriptions-item>
            <el-descriptions-item label="就诊类型">{{ patientInfo.visitType || '暂无' }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>
        
        <el-tabs v-model="activeTab">
          <!-- 药品处方 -->
          <el-tab-pane label="药品处方" name="medicine">
            <div class="tab-header">
              <el-button type="primary" @click="addMedicineItem">添加药品</el-button>
              <el-button type="success" @click="useTemplate">使用模板</el-button>
              <el-button type="info" @click="copyHistory">复制历史</el-button>
            </div>
            
            <el-table :data="medicineItems" style="width: 100%">
              <el-table-column label="药品名称" min-width="150">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.name"
                    filterable
                    remote
                    :remote-method="searchMedicine"
                    placeholder="请输入药品名称"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in medicineOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="规格" width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.specification" placeholder="规格" />
                </template>
              </el-table-column>
              <el-table-column label="用法" width="120">
                <template #default="scope">
                  <el-select v-model="scope.row.usage" placeholder="用法">
                    <el-option label="口服" value="口服" />
                    <el-option label="静脉注射" value="静脉注射" />
                    <el-option label="肌肉注射" value="肌肉注射" />
                    <el-option label="外用" value="外用" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="频次" width="120">
                <template #default="scope">
                  <el-select v-model="scope.row.frequency" placeholder="频次">
                    <el-option label="每日一次" value="qd" />
                    <el-option label="每日两次" value="bid" />
                    <el-option label="每日三次" value="tid" />
                    <el-option label="每日四次" value="qid" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="数量" width="100">
                <template #default="scope">
                  <el-input-number v-model="scope.row.quantity" :min="1" />
                </template>
              </el-table-column>
              <el-table-column label="单位" width="100">
                <template #default="scope">
                  <el-select v-model="scope.row.unit" placeholder="单位">
                    <el-option label="盒" value="盒" />
                    <el-option label="瓶" value="瓶" />
                    <el-option label="支" value="支" />
                    <el-option label="片" value="片" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="天数" width="100">
                <template #default="scope">
                  <el-input-number v-model="scope.row.days" :min="1" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="danger" link @click="removeMedicineItem(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <!-- 治疗单 -->
          <el-tab-pane label="治疗单" name="treatment">
            <div class="tab-header">
              <el-button type="primary" @click="addTreatmentItem">添加治疗项目</el-button>
              <el-button type="success" @click="useTemplate">使用模板</el-button>
            </div>
            
            <el-table :data="treatmentItems" style="width: 100%">
              <el-table-column label="治疗项目" min-width="200">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.name"
                    filterable
                    placeholder="请选择治疗项目"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in treatmentOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="数量" width="100">
                <template #default="scope">
                  <el-input-number v-model="scope.row.quantity" :min="1" />
                </template>
              </el-table-column>
              <el-table-column label="单位" width="100">
                <template #default="scope">
                  <el-select v-model="scope.row.unit" placeholder="单位">
                    <el-option label="次" value="次" />
                    <el-option label="个" value="个" />
                    <el-option label="小时" value="小时" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="danger" link @click="removeTreatmentItem(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <!-- 检查申请单 -->
          <el-tab-pane label="检查申请单" name="examination">
            <div class="tab-header">
              <el-button type="primary" @click="addExaminationItem">添加检查项目</el-button>
              <el-button type="success" @click="useTemplate">使用模板</el-button>
            </div>
            
            <el-table :data="examinationItems" style="width: 100%">
              <el-table-column label="检查项目" min-width="200">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.name"
                    filterable
                    placeholder="请选择检查项目"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in examinationOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="数量" width="100">
                <template #default="scope">
                  <el-input-number v-model="scope.row.quantity" :min="1" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="danger" link @click="removeExaminationItem(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <!-- 检验申请单 -->
          <el-tab-pane label="检验申请单" name="laboratory">
            <div class="tab-header">
              <el-button type="primary" @click="addLaboratoryItem">添加检验项目</el-button>
              <el-button type="success" @click="useTemplate">使用模板</el-button>
            </div>
            
            <el-table :data="laboratoryItems" style="width: 100%">
              <el-table-column label="检验项目" min-width="200">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.name"
                    filterable
                    placeholder="请选择检验项目"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in laboratoryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="数量" width="100">
                <template #default="scope">
                  <el-input-number v-model="scope.row.quantity" :min="1" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="danger" link @click="removeLaboratoryItem(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        
        <el-form-item label="医嘱备注">
          <el-input
            v-model="orderForm.notes"
            type="textarea"
            :rows="3"
            placeholder="请输入医嘱备注信息"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 患者信息
const patientInfo = reactive({
  cardNo: '202404210001',
  name: '张三',
  gender: '男',
  age: 45,
  insuranceType: '城镇职工医保',
  visitType: '普通门诊'
})

// 医嘱表单
const orderForm = reactive({
  notes: ''
})

// 当前激活的标签页
const activeTab = ref('medicine')

// 药品选项
const medicineOptions = ref([
  { value: '阿莫西林', label: '阿莫西林' },
  { value: '布洛芬', label: '布洛芬' },
  { value: '感冒灵', label: '感冒灵' },
  { value: '板蓝根', label: '板蓝根' }
])

// 治疗项目选项
const treatmentOptions = ref([
  { value: '大换药', label: '大换药' },
  { value: '激光治疗', label: '激光治疗' },
  { value: '高压氧', label: '高压氧' },
  { value: '针灸', label: '针灸' }
])

// 检查项目选项
const examinationOptions = ref([
  { value: 'X光检查', label: 'X光检查' },
  { value: 'CT检查', label: 'CT检查' },
  { value: '核磁共振', label: '核磁共振' },
  { value: 'B超检查', label: 'B超检查' }
])

// 检验项目选项
const laboratoryOptions = ref([
  { value: '血常规', label: '血常规' },
  { value: '尿常规', label: '尿常规' },
  { value: '肝功能', label: '肝功能' },
  { value: '肾功能', label: '肾功能' }
])

// 药品项目
const medicineItems = ref([
  {
    name: '阿莫西林',
    specification: '0.25g*24片',
    usage: '口服',
    frequency: 'tid',
    quantity: 1,
    unit: '盒',
    days: 3
  }
])

// 治疗项目
const treatmentItems = ref([
  {
    name: '大换药',
    quantity: 1,
    unit: '次'
  }
])

// 检查项目
const examinationItems = ref([
  {
    name: 'X光检查',
    quantity: 1
  }
])

// 检验项目
const laboratoryItems = ref([
  {
    name: '血常规',
    quantity: 1
  }
])

// 搜索药品
const searchMedicine = (query: string) => {
  if (query) {
    // 这里应该调用API搜索药品
    medicineOptions.value = [
      { value: '阿莫西林', label: '阿莫西林' },
      { value: '布洛芬', label: '布洛芬' },
      { value: '感冒灵', label: '感冒灵' },
      { value: '板蓝根', label: '板蓝根' }
    ].filter(item => item.label.includes(query))
  } else {
    medicineOptions.value = []
  }
}

// 添加药品项目
const addMedicineItem = () => {
  medicineItems.value.push({
    name: '',
    specification: '',
    usage: '口服',
    frequency: 'qd',
    quantity: 1,
    unit: '盒',
    days: 3
  })
}

// 删除药品项目
const removeMedicineItem = (index: number) => {
  medicineItems.value.splice(index, 1)
}

// 添加治疗项目
const addTreatmentItem = () => {
  treatmentItems.value.push({
    name: '',
    quantity: 1,
    unit: '次'
  })
}

// 删除治疗项目
const removeTreatmentItem = (index: number) => {
  treatmentItems.value.splice(index, 1)
}

// 添加检查项目
const addExaminationItem = () => {
  examinationItems.value.push({
    name: '',
    quantity: 1
  })
}

// 删除检查项目
const removeExaminationItem = (index: number) => {
  examinationItems.value.splice(index, 1)
}

// 添加检验项目
const addLaboratoryItem = () => {
  laboratoryItems.value.push({
    name: '',
    quantity: 1
  })
}

// 删除检验项目
const removeLaboratoryItem = (index: number) => {
  laboratoryItems.value.splice(index, 1)
}

// 使用模板
const useTemplate = () => {
  ElMessage.info('使用模板功能待实现')
}

// 复制历史
const copyHistory = () => {
  ElMessage.info('复制历史功能待实现')
}

// 保存医嘱
const handleSave = () => {
  // 这里应该调用API保存医嘱信息
  ElMessage.success('医嘱信息保存成功')
}

// 打印医嘱
const handlePrint = () => {
  // 这里应该调用打印功能
  ElMessage.success('医嘱打印成功')
}
</script>

<style scoped>
.orders-container {
  padding: 20px;
}

.orders-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.tab-header {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}
</style> 